<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tab {
            border-collapse: collapse;
            width: 400px;
            heigth: 400px;
        }
        #tab tr:nth-child(2) td:nth-child(3) {
            color: red;
            font-size: 32px;
            text-align: center;
            background-color: antiquewhite;
            font-weigth: bold;
            text-decoration: underline;
            font-style: italic;
        
        }
        #ol{
            list-style-type: upper-alpha;
        }
        body {
            margin-bottom: 400px;
        }
        #keywords {
            color: brown;
        }
    </style>
</head>
<body>
    <h1 id="top">1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <p>zaicishuruduanluozaicishuru<span id="keywords">shuru</span>duanluozaicishuruduanluozaicishuruduanluo</p>
    <p>zaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluo</p>
    <p>zaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluo</p>
 
    <b>加粗</b>
    <strong>加粗</strong>
    <i>倾斜</i>
    <em>倾斜</em>
    m<sup>2</sup>
    o<sub>2</sub>
    <ins>下划线</ins>
    <del>删除线</del>
    <a href="https://www.baidu.com"target="blank">点击跳转到百度</a>
    <a href="#top">置顶</a>
    <img src="./images/snipaste.png" width="300" alt="路径错误"title="标题"> 
    <table id="tab" border="1">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
    <ol id="ol">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    <hr>

<form action="">
 用户名：<input type="text" placeholder="请输入用户名"><br>
 密码：<input type="password" placeholder="请输入密码"><br>
 性别：
 <input type="radio" name="gender" value="male">男
 <input type="radio" name="gender" value="female">女
 <br>
 兴趣爱好：
 <input type="checkbox" name="hobby" value="badminton">羽毛球
 <input type="checkbox" name="hobby" value="tennis">网球
 <input type="checkbox" name="hobby" value="basketball">篮球
 <br>
 城市：
 <select name="city" >
    <option value="nanjing">南京</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="hangzhou">杭州</option>
 </select>
 <br>
 个人介绍：
 <textarea name="introduction" cols="30" rows="10" placeholder="请输入个人介绍"></textarea>
</form>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<div>通用的块级标签</div>
<div>通用的块级标签</div>
<div>通用的块级标签</div>
<span>通用的行内标签</span>
<span>通用的行内标签</span>
<span>通用的行内标签</span>

</body>
</html>